<template>
	<view class="login-page">
		<view class="login-wrap">
			<view class="log">
				<image src="../../static/allimg/hosp.jpg" mode=""></image>
				<h2 style="color: rgb(0,139, 250);">欢迎登录</h2>
			</view>
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="username" name="username" label="用户名" placeholder="用户名"
						:rules="[{ required: true, message: '请填写用户名' }]" />
					<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]" />
				</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit" size="normal">
						确定
					</van-button>
				</div>
			</van-form>
			<p @click="gologon">未注册?前往注册</p>
		</view>

	</view>
</template>

<script setup>
	import api from '../../lib/request';
	import {
		ref
	} from 'vue';
	import {
		user
	} from '../../pinia/user.js'
	import {
		showToast
	} from 'vant';
	const User = user()

	const username = ref('');
	const password = ref('111');
	// 点击确定
	const onSubmit = async (values) => {
		let res = await api.post('/user/user/login', values)
	
		let {data,code,msg} = res
		if (!code) {
			return showToast(msg)
		}
		uni.showToast({
			title: '登录' + (code ? '成功' : '失败'),
			icon: 'none',
			success: () => {
				// 如果登录成功过1500秒，回到上一页
				if (code) {
					User.updateUserMsg(data)
					User.updateUserStatus(1)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home-page/home-page'
						})
					}, 1500)
					// 存储
					uni.setStorageSync('token', data.token)
				}
			}
		})

	};
	// 前往注册页
	const gologon = () => {
		uni.navigateTo({
			url: '/views/logon/logon'
		})
	}
</script>

<style>
	.login-wrap {
		position: absolute;
		top: 240rpx;
		left: calc(100vw - 350px);
	}

	.log {
		width: 370rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: auto;

	}

	image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		margin-bottom: 40rpx;
	}

	.log>h2 {
		margin-bottom: 40rpx;
	}

	p {
		position: absolute;
		right: 40rpx;
		color: #8a8a8a;
	}
</style>